<template>
    <div class="tabs">
        <div class="tabs-item">
            <el-scrollbar always ref="refScrollbar" @wheel.prevent="handleScroll">
                <div class="scrollbar-flex-content">
                    <el-dropdown trigger="contextmenu" v-for="(item, index) in openTags" :key="item"
                        @contextmenu.native="hiddeDrop">
                        <p @click="handleTabs(index)"
                            :class="[item.fullPath == route.fullPath ? 'scrollbar-demo-item1' : 'scrollbar-demo-item']">
                        <div class="tabsIcon" v-if="item.fullPath == route.fullPath">
                            <el-icon color="#dddddd" :size="15">
                                <Location />
                            </el-icon>
                        </div>
                        <span>{{ t(item.title) }}</span>
                        <div class="tabsIcon" @click.stop="removeTab(index)" v-if="!(index == 0)">
                            <el-icon color="#dddddd" :size="15">
                                <Close />
                            </el-icon>
                        </div>
                        </p>
                        <template #dropdown>
                            <el-dropdown-menu>
                                <el-dropdown-item @click="refresh(item.fullPath)" icon="RefreshLeft">
                                    刷新
                                </el-dropdown-item>
                                <el-dropdown-item icon="Close" @click="removeRightTab(item.fullPath)"
                                    :disabled="openTags.indexOf(openTags[index + 1]) == -1">
                                    关闭右侧标签
                                </el-dropdown-item>
                                <el-dropdown-item :disabled="openTags.length == 1" icon="CircleClose"
                                    @click="removeAllTab()">
                                    全部关闭
                                </el-dropdown-item>
                            </el-dropdown-menu>
                        </template>
                    </el-dropdown>
                </div>
            </el-scrollbar>
        </div>
    </div>
</template>
<script setup lang="ts" >
import { useRouter, type RouteLocationNormalizedLoaded } from "vue-router"
import { useRoute } from "vue-router"
import { reactive, ref, watch, onMounted, nextTick, computed } from 'vue'
import { useI18n } from 'vue-i18n'
import { useStoreTags } from '../../stores/tags/index'
const store = useStoreTags()

const { t } = useI18n()
const router = useRouter()
const route = useRoute()
var isShow = ref(true)//是否刷新

// 标签页
let openTags = computed(() => store.tagList)
// console.log(openTags.value);


// 监听路由
watch(route, (route) => {
    if ("index" !== route.matched[0].name) {
        return
    }
    let index = -1
    if ("productCreate" === route.name || "productEdit" === route.name) {
        let findIndex = openTags.value.findIndex(item => "listsmanage" === item.name)
        if (-1 != findIndex) {
            index = findIndex + 1
        }
    }
    store.pushTag(route, index)
    // pushTag(route)
})
onMounted(() => {
    store.pushTag(route)
})

// 点击标签页
const handleTabs = (index: number) => {
    store.handleTabs(index)
}
// 刷新
const refresh = (fullPath: string) => {
    // console.log(fullPath,'fullPath');
    let tag = openTags.value.find(i => i.fullPath == fullPath)
    // console.log(tag, 'tag');
    isShow.value = false
    refreshStatue()
    nextTick(() => {
        setTimeout(() => {
            isShow.value = true
            refreshStatue()
            router.push(fullPath)
        }, 200);
    })
}
// 关闭标签
const removeTab = (index: number) => {
    store.removeTab(index)
}
// 点击关闭右侧标签
const removeRightTab = (fullPath: string) => {
    store.removeRightTab(fullPath)
}
// 移除全部标签页
const removeAllTab = () => {
    store.removeAllTab()
}



// 子传父通过数组的形式传值，定义子传父的事件defineEmits([自定义名称])
const emit = defineEmits(['refresh'])
const refreshStatue = () => {
    emit('refresh', isShow.value) // 回传
}

/**
 * hiddeDrop 点击时隐藏其它下拉框
 */
const hiddeDrop = () => {
    document.body.click()
}
/**
 * 滚动事件
 *scrollbar.wrap$获取到包裹容器的element对象
 */
const refScrollbar = ref();
const handleScroll = (e: { wheelDelta: number; deltaY: number }) => {
    const wheelDelta = e.wheelDelta;
    const scrollbar = refScrollbar.value;
    scrollbar.setScrollLeft(scrollbar.wrapRef.scrollLeft - wheelDelta);
};
</script>



<style lang="less" scoped>
.tabs {
    height: 4vh;
    padding: 5px 0 0.5vh 2vw;
    border-top: #ccc 1px solid;
    border-bottom: #ccc 2px solid;

    .tabs-item {
        width: 100%;
        height: 4.5vh;
    }

    span {
        margin: 0 8px;
    }
}

// 标签页滚动条
.scrollbar-flex-content {
    display: flex;
    // width: 100vw;
}

.scrollbar-demo-item {
    font-size: 14px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 8em;
    height: 3.5vh;
    margin: 0 5px 0 0;
    padding: 0 5px;
    text-align: center;
    border-radius: 4px;
    border: #ccc 1px solid;
    // background: rgb(165, 197, 243);
    // background: var(--el-color-danger-light-5);
}

.scrollbar-demo-item1 {
    font-size: 15px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 8em;
    height: 3.5vh;
    margin: 0 5px 0 0;
    padding: 0 5px;
    text-align: center;
    border-radius: 4px;
    // background: rgb(165, 197, 243);
    background: var(--el-color-danger-light-5);
    border: transparent 1px solid;
    color: white;
}

.el-button+.el-button {
    margin-left: 8px;
}
</style>